<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - org.brophy.js.drag.Dragger</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}
		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/org.brophy.js.ajax.html">org.brophy.js.ajax</a></li>
	
	<li><a href="../symbols/org.brophy.js.ajax.ReplyManager.html">org.brophy.js.ajax.ReplyManager</a></li>
	
	<li><a href="../symbols/org.brophy.js.array.html">org.brophy.js.array</a></li>
	
	<li><a href="../symbols/org.brophy.js.constant.html">org.brophy.js.constant</a></li>
	
	<li><a href="../symbols/org.brophy.js.drag.html">org.brophy.js.drag</a></li>
	
	<li><a href="../symbols/org.brophy.js.drag.Dragger.html">org.brophy.js.drag.Dragger</a></li>
	
	<li><a href="../symbols/org.brophy.js.event.html">org.brophy.js.event</a></li>
	
	<li><a href="../symbols/org.brophy.js.select.html">org.brophy.js.select</a></li>
	
	<li><a href="../symbols/org.brophy.js.util.html">org.brophy.js.util</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class org.brophy.js.drag.Dragger
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				
			
				
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/D__matt_Computer_JavaScript_orgbrophyjs_trunk_org_brophy_js_drag.js.html">drag.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class org.brophy.js.drag.Dragger.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/org.brophy.js.drag.Dragger.html#constructor">org.brophy.js.drag.Dragger</a></b>(options)
							</div>
							<div class="description">The Dragger class lets you easily add drag and drop   funcitonality to any element.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class org.brophy.js.drag.Dragger.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/org.brophy.js.drag.Dragger.html#getEvent">getEvent</a></b>()
								</div>
								<div class="description">Get the MochiKit Event that was fired</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/org.brophy.js.drag.Dragger.html#getOriginalNode">getOriginalNode</a></b>()
								</div>
								<div class="description">Get the original node of the drag</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/org.brophy.js.drag.Dragger.html#getTargetNode">getTargetNode</a></b>()
								</div>
								<div class="description">Get the target node of the drag</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/org.brophy.js.drag.Dragger.html#setElementDraggable">setElementDraggable</a></b>(elem)
								</div>
								<div class="description">Apply a given Dragger object to the specified element.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>org.brophy.js.drag.Dragger</b>(options)
				</div>
				
				<div class="description">
					The Dragger class lets you easily add drag and drop   funcitonality to any element.  Simply create a new Dragger()  object with whatever options you like, and then call the   Dragger.setElementDraggable() on all the elements you   would like to be able to drag.  <br><br>  In the options below that are functions, you can use the methods  this.getOriginalNode() and this.getTargetNode() to retrieve the  node we started dragging and the node we are actually dragging,  respectively, as well as this.getEvent() to get the event that   was fired.
					
				</div>
				
				
				
				
					
						<dl class="detailList">
						<dt class="heading">Parameters:</dt>
						
							<dt>
								 <b>options</b>
								
							</dt>
								<dd>This is an object that can have the following options, and    their (type) and [default] values:<br/><br/>   <ul>     <li><b>cloneNode</b> (boolean) [false] </li>       Should we clone the node we clicked on and drag that instead?     <br><br>     <li><b>getClonedNode</b> (function) [null] </li>       Advanced function to create a different node to drag instead        of the original node we clicked on.  <br>        - Takes no parameters<br>        - Should return the new node to drag     <br><br>     <li><b>removeElement</b> (boolean) [false] </li>     Should we remove the dragged element from the DOM when we finish?      <br><br>      <li><b>opacity</b> (float) [0.5] </li>     Opacity value between 0 and 1 for the dragged element      <br><br>     <li><b>snap</b> (integer) [1] </li>     While dragging, snap the element every 'n' pixels from it's     original location     <br><br>     <li><b>disableVertical</b> (boolean) [false] </li>     Disable vertical dragging of the element     <br><br>     <li><b>disableHorizontal</b> (boolean) [false] </li>     Disable horizontal dragging of the element     <br><br>     <li><b>escapeToCancel</b> (boolean) [true] </li>     Whether or not pressing the Escape key while dragging should      cancel the drag     <br><br>     <li><b>onStart</b> (function) [null] </li>     Function to run at the beginning of a drag<br>       - Takes no parameters     <br><br>       <li><b>onDrag</b> (function) [null] </li>     Function to run with each onmousemove event during a drag<br>       - Takes no parameters     <br><br>       <li><b>onStop</b> (function) [null] </li>     Function to run at the end of a successful drag<br>       - Takes a boolean parameter indicating whether this stop          was caused by a user cancel or not   </ul></dd>
						
						</dl>
					
					
					
					
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="getEvent"> </a>
					<div class="fixedFont">
					
					<span class="light">{MochiKit Event object}</span>
					<b>getEvent</b>()
					
					</div>
					<div class="description">
						Get the MochiKit Event that was fired
						
						
					</div>
					
					
					
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd>The MochiKit Event that was fired</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="getOriginalNode"> </a>
					<div class="fixedFont">
					
					<span class="light">{Node}</span>
					<b>getOriginalNode</b>()
					
					</div>
					<div class="description">
						Get the original node of the drag
						
						
					</div>
					
					
					
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd>The original node that was clicked on to start the drag</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="getTargetNode"> </a>
					<div class="fixedFont">
					
					<span class="light">{Node}</span>
					<b>getTargetNode</b>()
					
					</div>
					<div class="description">
						Get the target node of the drag
						
						
					</div>
					
					
					
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd>The actual node we are dragging, which may or may not the the same as the original, based on the behavior of any specified 'getClonedNode' function.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="setElementDraggable"> </a>
					<div class="fixedFont">
					
					
					<b>setElementDraggable</b>(elem)
					
					</div>
					<div class="description">
						Apply a given Dragger object to the specified element.  This will   make the specified element draggable with all of the properties of   the given Dragger object.  You may set multiple elements draggable   with the same Dragger and they will all behave the same.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<b>elem</b>
									
								</dt>
								<dd>The element to make draggable</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd>null</dd>
							
							</dl>
						
						
						

					
				
			
			
			<hr />
		</div>
		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a> 2.0.2 on Sun Aug 02 2009 20:49:02 GMT-0400 (EDT)
		</div>
	</body>
</html>
